<template>
	<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="loadMore" style="height: 98vh">
		<view class="">
			<view class="top_bg" style="">
				<image src="/static/imgs/home/phb_bg.png" mode="" style="width: 100%;height: 570rpx;"></image>
				<view class="top_box jui_flex_col_center" v-if="rankingList[1]">
					<image :src="rankingList[1].avatar" style="height: 120rpx;width: 120rpx;border-radius: 50%;"
						mode=""></image>
					<view class="jui_fc_fff jui_mar_t20">
						{{rankingList[1].nickname}}
					</view>
					<view class="jui_fc_fff jui_mar_t20 jui_fs29 jui_fc_fff">
						{{rankingList[1].total_money | numFilter}} U
					</view>
				</view>
				<view class="top_box2 jui_flex_col_center" v-if="rankingList[0]">
					<image :src="rankingList[0].avatar" style="height: 160rpx;width: 160rpx;border-radius: 50%;"
						mode=""></image>
					<view class="jui_fc_fff jui_mar_t20">
						{{rankingList[0].nickname}}
					</view>
					<view class="jui_fc_fff jui_mar_t20 jui_fs29 jui_fc_fff">
						{{rankingList[0].total_money | numFilter}} U
					</view>
				</view>
				<view class="top_box3 jui_flex_col_center" v-if="rankingList[2]">
					<image :src="rankingList[2].avatar" style="height: 120rpx;width: 120rpx;border-radius: 50%;"
						mode=""></image>
					<view class="jui_fc_fff jui_mar_t20">
						{{rankingList[2].nickname}}
					</view>
					<view class="jui_fc_fff jui_mar_t20 jui_fs29 jui_fc_fff">
						{{rankingList[2].total_money | numFilter}} U
					</view>
				</view>
			</view>
			<view class="jui_h100"></view>
			<view class="jui_h100"></view>
			<view class="jui_h100"></view>
			<!-- <view class="jui_h0 jui_bg_zhuse"></view> -->
			<view class="exchange_bg jui_pad_t8">
				<view class="jui_bg_fff jui_lrtop box jui_flex jui_flex_justify_between ">
					<view class="jui_bg_f5f jui_pad_t20 jui_pad_b20 jui_pad_l20 jui_bor_rad_30" style="width: 100%;">
						<view class="jui_fc_333 jui_font_w600">
							量化总收益
						</view>
						<view class="jui_mar_t20 jui_fc_pur jui_font_w600">
							USDT:{{total_profit?total_profit:'0.00'}}
						</view>
					</view>
					<view class="jui_flex jui_flex_items_center jui_mar_t20 " style="width: 100%;"
						v-for="(item,index) in rankingListC" :key="index">
						<view class="">
							{{index+4}}
						</view>
						<view class="jui_flex jui_flex_items_center jui_mar_l20 jui_bor_bottom jui_pad_b20"
							style="width: 100%;">
							<image :src="item.avatar" class="jui_bg_f5f"
								style="width: 100rpx;height: 100rpx;border-radius: 50%;" mode=""></image>
							<view class="jui_mar_l20">
								<view class="">
									{{item.nickname}}
								</view>
								<view class="jui_fc_999 jui_mar_t20">
									<text>今日：{{item.today_profit}}</text>
									<text class="jui_mar_l20">总：{{item.total_money}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="none" v-if="!rankingListC.length">
						暂无数据
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				total_profit: '',
				list: [],
				rankingList: [],
				hasMore: false,
				rankingListC: []
			}
		},
		onLoad() {
			this.rank()
		},
		methods: {
			// loadMore() {
			// 	if (this.hasMore) {
			// 		this.page++;
			// 		this.rank();
			// 	}
			// },
			rank() {
				this.$api.rank().then(res => {
					this.total_profit = res.data.total_profit;
					this.list = [...this.list, ...res.data.rankArr];
					this.list.forEach((item, index) => {
						if (index < 3) {
							this.rankingList.push(item)
						} else {
							this.rankingListC.push(item)
						}
					})
					if (res.data.rankArr.length == 0) {
						this.hasMore = false
					} else {
						this.hasMore = true
					}
					// console.log(this.rankingList)
				});
			}
		},
		filters: {
			numFilter(value) {
				let realVal = ''
				if (!isNaN(value) && value !== '') {
					// 截取当前数据到小数点后三位
					let tempVal = parseFloat(value).toFixed(5)
					realVal = tempVal.substring(0, tempVal.length - 1)
				} else {
					realVal = '--'
				}
				return realVal
			}

		},
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.exchange_bg {
		// background: $zhuse ;

		// padding-top: 90rpx;
		.box {
			padding: 50rpx 30rpx 0 30rpx;
			flex-wrap: wrap;
		}

	}

	.top_bg {
		width: 100%;
		position: relative;

		.top_box {
			position: absolute;
			bottom: -80rpx;
			left: 10%;
		}

		.top_box2 {
			position: absolute;
			bottom: -20rpx;
			left: 37%;
		}

		.top_box3 {
			position: absolute;
			bottom: -100rpx;
			left: 70%;
		}
	}
</style>
